<template>
    <div class="wrap">

        <div class="con">
            <p @click="close">返回</p>
            <dl v-for="(item,i) in buyList" :key="i">
                <dt>
                    <img :src="item.url">
                </dt>
                <dd>
                    <p>{{item.title}}</p>
                    <p>{{item.price}}</p>
                    <el-count :num='item.num' :id='item.id'></el-count>
                </dd>
            </dl>
            
        </div>
    </div>
</template>
<script>
import elCount from './elCount'
export default {
    props:['buyList'],
    components:{
        elCount
    },
    methods:{
        close(){
            this.$emit('close')
        }
    }
}
</script>
<style lang="scss" scoped>
    .wrap{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.6)
    }
    .con{
        width: 100%;
        height: auto;
        position: absolute;
        bottom: 0;
        left: 0;
          dl{
                width: 100%;
                height: 100px;  
                display: flex;
                background: #fff;
                border-bottom: 2px solid gray;
                dt{
                flex: 3;
                img{
                    width: 100%;
                    height: 100%;
                    background: orchid;
                }
                }
                dd{
                    flex: 7;
                    padding:0 5px;
                    p{
                        width: 100%;
                        font-size: 17px;
                        font-weight: bold;
                    }
                }
            }
    }
</style>

